<script lang="ts">
import {defineComponent, onMounted, provide, reactive, ref, toRefs, watch} from "vue";
import type {GlobalTheme} from 'naive-ui'
import WallpaperContent from '@/components/content/wallpaper/index/index.vue'
import WallpaperFooter from '@/components/content/wallpaper/footer/index.vue'
import CommonFooter from '@/components/common/footer/index.vue'
import Navbar from '@/components/common/navbar/index.vue'

export default defineComponent({
  components: {
    WallpaperContent, WallpaperFooter, CommonFooter, Navbar
  },
  setup() {
    const scrollContainerRef = ref<HTMLElement>(null as unknown as HTMLElement)
    const state = reactive({
      theme: ref<GlobalTheme | null>(null),
      scrollContainer: scrollContainerRef,
      target: () => scrollContainerRef.value,
      scrollTop: 0,
    })

    const methods = {
      expansionNavbar(expansion: boolean = true, delayTime: number = 5) {
        //延时小于0时 常驻60秒
        //延时等于0时 隐藏
        delayTime = delayTime > 16 ? 16 : delayTime < 0 ? 60 : delayTime
        const elNavbar = <HTMLElement>document.getElementById('navbar-card')
        const elContent = <HTMLElement>document.getElementById('content')
        const elLucency = <HTMLElement>document.getElementById('navbar-lucency')

        if (expansion) { //true 时表示滑出
          elNavbar.style.setProperty('top', '0px')
          elContent.style.setProperty('top', '72px')
          elLucency.style.setProperty('backdrop-filter', 'blur(10px)')
          setTimeout(() => { //一定时间后 自动滑入
            elNavbar.style.setProperty('top', '-72px')
            elContent.style.setProperty('top', '0px')
            elLucency.style.setProperty('backdrop-filter', 'blur(0px)')
          }, delayTime * 1000)
        } else {  //否则 滑入
          elNavbar.style.setProperty('top', '-72px')
          elContent.style.setProperty('top', '0px')
          elLucency.style.setProperty('backdrop-filter', 'blur(0px)')
        }
      },
      scrollLayout(e: Event) {
        let eventTarget = <Element>e.target
        state.scrollTop = <number>eventTarget.scrollTop
      }
    }
    provide("expansionNavbar", methods.expansionNavbar)

    onMounted(() => {

    })
    watch(
        () => [state.scrollTop],
        ([scrollTop], [oldScrollTop]) => {
          if (scrollTop <= oldScrollTop) {
            methods.expansionNavbar()
          } else methods.expansionNavbar(false)
        }
    )
    return {
      ...toRefs(state),
      ...methods,
    }
  }
})
</script>


<template>
  <div>
    <n-config-provider :theme="theme">
      <!-- <div id="navbar-lucency" class="navbar-lucency" @mouseover="expansionNavbar()" @click="expansionNavbar()"></div> -->
      
      <div class="content" id="content">
        <n-scrollbar style="max-height: 100vh">
          <n-layout-content>
            <n-loading-bar-provider>
              <wallpaper-content/>
            </n-loading-bar-provider>
          </n-layout-content>
          <n-layout-footer>
            <wallpaper-footer/>
            <common-footer/>
          </n-layout-footer>
        </n-scrollbar>
      </div>
      <Navbar/>
    </n-config-provider>
  </div>
</template>


<style scoped>
.navbar-lucency{
  position: fixed;    /*固定定位*/
  width: 100%;
  height: 72px;
  left: 0;
  top: 0;
  z-index: 97;
  /*color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  opacity: 0.5;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  filter: blur(20px);*/
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0 0 5px 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}
.content {
  transition: top .5s linear;  /*导航栏过渡出现和隐藏*/
  position: fixed;   /* 绝对定位，不管滚动条上下滚动都在相应的位置*/
  width: 100%;
}
</style>